<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
﻿<!DOCTYPE html>
<html>

	<head>

		<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>算得准</title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="muicss/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="muicss/app.css" />
		<!--<link href="muicss/mui.picker.css" rel="stylesheet" />
		<link href="muicss/mui.dtpicker.css" rel="stylesheet" />-->
		<link rel="stylesheet" type="text/css" href="muicss/mui.picker.min.css" />
		<link href="muicss/mui.poppicker.css" rel="stylesheet" />
		<script src="js/jquery-1.8.3.min.js"></script>
		<style>


	.slide{
		top:45;
		overflow: hidden;
		position: relative;
	


	}
	.slide .img{
		position: absolute;
		transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
	}
	.slide .img img{
		width: calc(100%);
		border-radius: 0;
	
	}

	.slide .img2{
		width:70%;
		left: -65%;
		z-index: 2;
		opacity: 0.6;
	}
	.slide .img3{
		width: 70%;
		left: 15%;
		z-index: 3;
	}
	.slide .img4{
		width: 70%;
		left: 95%;
		z-index: 2;
		opacity: 0.6;
	}



	.back{
		width: 100%;
		padding-bottom: 200px;
		background: linear-gradient(#2b2731, #1a1a1b); /* 标准的语法 */
	}
	
	.diqu{
		height: 60px;
		width: 80%;
		left: 10%;
		border-bottom: 1px solid white;
		position: relative;
		top:-105px;
	}	
	.diqu span{
		font-size: 20px;
		color: white;
		position: absolute;
		top:20px;

	}
	.diqu input{
		border: 0;
		width: 70%;
		height: 50px;
		text-align: right;
		position: absolute;
		left: 28%;
		top:5px;
		font-size: 16px;
		color: white;
		background:rgba(0,0,0,0);
		color: #4397cc;

	}
	.diqu img{
		position: absolute;
		right: 0;
		top:18px;
		width: 14px;
		height: 22px;
	}
	.xingbie{
		height: 60px;
		width: 80%;
		left: 10%;
		border-bottom: 1px solid white;
		position: relative;
		top:-105px;
	}
	.xingbie span{
		font-size: 20px;
		color: white;
		position: absolute;
		top:20px;

	}	
	.xingbie input{
		border: 0;
		width: 70%;
		height: 50px;
		text-align: right;
		position: absolute;
		left: 28%;
		top: 5px;
		font-size: 16px;
		color: white;
		background:rgba(0,0,0,0);
		color: #4397cc;

	}
	.xingbie img{
		position: absolute;
		right: 0;
		top:18px;
		width: 14px;
		height: 22px;
	}
	.shijian{
		height: 60px;
		width: 80%;
		left: 10%;
		border-bottom: 1px solid white;
		position: relative;
		top:-105px;
	}
	.shijian span{
		font-size: 20px;
		color: white;
		position: absolute;
		top:20px;

	}	
	.shijian input{
		border: 0;
		width: 70%;
		height: 50px;
		text-align: right;
		position: absolute;
		left: 28%;
		top: 5px;
		font-size: 16px;
		color: white;
		background:rgba(0,0,0,0);
		color: #4397cc;

	}
	.shijian img{
		position: absolute;
		right: 0;
		top:18px;
		width: 14px;
		height: 22px;
	}
	</style>
	</head>

	<body class="back">

	<div >
	
		<div id="slide" class="slide" >
		  <table>
           <c:forEach var="works" items="${list}">
             <tr>
		       <td><div class="img"><a href="${works.url}"><img id="img1" src="${works.img_url}"/></a></div></td>
             </tr>
           </c:forEach>
          </table> 
       
		</div>	

		
			
		
				
			<div class="diqu">
			<span>出生地</span>
			<input  id='showCityPicker3'  type='button' >
			<img src="image/genduo.png">
			</div>

			<div class="xingbie">
			<span>性别</span>
			<input id='showUserPicker'  type='button'>
			<img src="image/genduo.png">
			</div>

			<div class="shijian">
			<span>出生日期</span>
			<input  id='demo7' type='button' data-options='{"type":"hour","customData":{"h":[{"text":"23~1 子时","value":"23~1 子时"},{"text":"1~3 丑时","value":"1~3 丑时"},{"text":"3~5 寅时","value":"3~5 寅时"},{"text":"5~7 卯时","value":"5~7 卯时"},{"text":"7~9 辰时","value":"7~9 辰时"},{"text":"9~11 寅时","value":"9~11 巳时"},{"text":"11~13 午时","value":"11~13 午时"},{"text":"13~15 未时","value":"13~15 未时"},{"text":"15~17 申时","value":"15~17 申时"},{"text":"17~19 酉时","value":"17~19 酉时"},{"text":"19~21 戌时","value":"19~21 戌时"},{"text":"21~23 亥时","value":"21~23 亥时"}]},"labels":["年", "月", "日", "时辰"]}' class="btn ">
			<img src="image/genduo.png">



			
			<button id="button" style="width: 80%;height: 50px;top:90px;border: 0;border-radius: 8px; background: linear-gradient(to right, #4f77d0 , #3fa2ca);position:absolute;left: 10%;font-size: 20px;color: white;">开始免费测</button></a>
			


		
	</div>		
		
		<script src="muijs/mui.min.js"></script>
		<script src="js/wbjs.js"></script>
		<!--<script src="muijs/mui.picker.js"></script>
		<script src="muijs/mui.dtpicker.js"></script>-->
		<script src="muijs/mui.picker.min.js"></script>
		<script src="muijs/mui.poppicker.js"></script>
		<script src="muijs/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="muijs/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		var sex1=document.getElementById("showUserPicker")
		
		var a = '<%=request.getAttribute("sex")%>';
		if(a==0){
			sex1.value=""
		}
		if(a==1){
			sex1.value="男"
		}
		if(a==2){
			sex1.value="女"
		}
		
		
		</script>
		<script type="text/javascript">
		
		
		
		
		document.getElementById("button").onclick=function(){
		var time=document.getElementById("demo7").value;
		var sex	=document.getElementById("showUserPicker").value
		var diqu=document.getElementById("showCityPicker3").value
		var times=time.split(" ")
		sessionStorage.setItem("time",times[0]);
		sessionStorage.setItem("times",times[2]);
		sessionStorage.setItem("sex",sex);
		if(diqu==""){
			mui.alert("请选择出生地")
			return
		}else if(sex==""){
			mui.alert("请选择性别")
			return
		}else if(time==""){
			mui.alert("请选择出生日期")
			return
		}else{
			location.href="mianfei.html"
		}
		

		
		//console.log(times[0])
		//console.log(times[2])
		//if(time)
		}
			

		</script>
	
	</body>

</html>